<template>
  <view class="record-wrap" :data-theme="globPrimary">
    <u-navbar :z-index="10076">
      <view class="record-navbar" :style="[titleStyle]" @click="clickNavbarHeader">
        <view class="title u-line-1">考试记录</view>
        <u-image
          class="img"
          :class="{ active: navbarPopupVisible }"
          width="36rpx"
          height="36rpx"
          src="@/pageUser/static/images/myexam_up_icon.png"
        ></u-image>
      </view>
    </u-navbar>
    <view class="record-tabs" :style="{ top: globNavbarHeight + globStatusBarHeight + 'px' }">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="current"
        :activeColor="globPrimaryColor"
        @change="tabChange"
      ></u-tabs>
    </view>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getdataInfo"
    >
      <view
        class="record-item u-border-bottom"
        v-for="(item, index) in list"
        :key="index"
        @click="clickRecordItem(item)"
      >
        <view class="title u-line-2">
          {{ delHtmlTag(item.paper_title, 40) }}
          <text class="tag" v-if="item.answer_times > 1">第{{ item.answer_times }}次作答</text>
        </view>
        <view class="sub-title u-line-1" v-if="type == 4 || type == 5">
          {{ type == 4 ? item.rollup_title : item.course_title }}
        </view>
        <view class="desc">
          <text class="text">{{ answerStatusText(item) }}</text>
          <u-line direction="col" length="16rpx" margin="0 16rpx" />
          <text class="text">答对{{ item.right_count }}题</text>
          <text class="text auto">{{ item.commit_time | date('yyyy-mm-dd hh:MM') }}</text>
        </view>
        <div v-show="type == 5" class="img">
          <u-image
            :width="146"
            :height="146"
            src="@/pageUser/static/images/exam_qualified_icon.png"
            v-if="item.pass == 1"
          ></u-image>
          <u-image
            :width="146"
            :height="146"
            src="@/pageUser/static/images/exam_unqualified_icon.png"
            v-else
          ></u-image>
        </div>
      </view>
    </mescroll-body>
    <u-popup v-model="navbarPopupVisible" mode="top">
      <view
        :style="{
          width: '100%',
          height: globNavbarHeight + globStatusBarHeight + 'px',
        }"
      ></view>
      <view class="record-popup">
        <view
          class="record-popup-item u-border-bottom"
          :class="{
            active: navbarActive == item.value,
          }"
          v-for="item in navbarOptions"
          :key="item.value"
          @click="clickNavbarItem(item.url)"
        >
          {{ item.title }}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      navbarActive: 1,
      navbarPopupVisible: false,
      navbarOptions: [
        {
          title: '我的待考',
          value: 4,
          url: '/pageUser/exam/index',
        },
        {
          title: '考试记录',
          value: 1,
          url: '/pageUser/exam/record',
        },
        {
          title: '错题本',
          value: 2,
          url: '/pageUser/exam/wrong',
        },
        {
          title: '题目收藏',
          value: 3,
          url: '/pageUser/exam/collected',
        },
      ],
      tabList: [
        {
          name: '公开考试',
          type: 3,
        },
        {
          name: '套卷练习',
          type: 4,
        },
        {
          name: '课程考试',
          type: 5,
        },
        {
          name: '派发考试',
          type: 6,
        },
      ],
      current: 0,
      type: 3, // 类型【3：公开考试；4：套卷练习；5：课程考试；6：派发考试；】
      list: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - 41
      return `${height}px`
    },
    // 导航中间的标题的样式
    titleStyle() {
      let titleWidth = 250
      let systemInfo = this.$u.sys()
      let style = {}
      // #ifndef MP
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      // #endif
      // #ifdef MP
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right =
        rightButtonWidth -
        (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 +
        rightButtonWidth +
        'px'
      // #endif
      style.width = uni.upx2px(titleWidth) + 'px'
      return style
    },
  },
  methods: {
    clickNavbarHeader() {
      this.navbarPopupVisible = !this.navbarPopupVisible
    },
    clickNavbarItem(url) {
      this.navbarPopupVisible = false
      this.$u.route(url)
    },
    getdataInfo(page) {
      this.$edu.api
        .getRollExamList({
          type: this.type,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          if (page.num == 1) this.list = []
          this.list = this.list.concat(data.data)
          this.mescroll.endBySize(data.data.length, data.total)
        })
    },
    clickRecordItem(item) {
      if (this.type == 4) {
        this.$u.route('/pageFound/exam/record/index', {
          id: item.id,
          name: this.type,
        })
      } else {
        if (item.visible_answer == 1 || item.answer_status == 2) {
          this.$u.route('/pageFound/exam/record/index', {
            id: item.id,
          })
        } else {
          this.$u.toast('正在阅卷，请耐心等待')
        }
      }
    },
    answerStatusText(item) {
      switch (item.answer_status) {
        case 0:
          return '提交答案'
        case 1:
          return `正在阅卷`
        default:
          return this.type == 4 ? `共${item.topic_count}题` : `得分：${item.user_score}分`
      }
    },
    tabChange(index) {
      this.list = []
      this.current = index
      this.type = this.tabList[index].type
      this.mescroll.resetUpScroll()
    },
    delHtmlTag(html = '', textLength) {
      if (html.length > textLength) {
        return html.substring(0, textLength) + '...'
      } else {
        return html
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.record-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 60rpx;
  .title {
    font-size: 16px;
    color: $edu-content-color;
  }
  .img {
    transform: rotate(180deg);
    margin-left: 12rpx;
    &.active {
      transform: rotate(0deg);
    }
  }
}
.record-tabs {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
}
.record-wrap {
  padding-top: 80rpx;
  background-color: #ffffff;
}
.record-item {
  margin-left: 30rpx;
  padding: 24rpx 30rpx 24rpx 0;
  position: relative;
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: $edu-main-color;
    line-height: 50rpx;
  }
  .tag {
    margin-left: 8rpx;
    padding: 5rpx 8rpx;
    font-size: 22rpx;
    font-weight: 400;
    color: $edu-content-color;
    line-height: 30rpx;
    background: #f1f1f1;
    border-radius: 6rpx;
    white-space: nowrap;
    display: inline-block;
  }
  .sub-title {
    margin-top: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #888888;
    line-height: 33rpx;
  }
  .desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28rpx;
    u-line {
      flex: 0;
    }
    .text {
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .text:last-child {
      margin-left: auto;
    }
  }
  .img {
    position: absolute;
    right: 16rpx;
    top: 16rpx;
    width: 146rpx;
    height: 146rpx;
    z-index: 10;
  }
}

.record-popup {
  padding: 0 30rpx 0;
  .record-popup-item {
    padding: 24rpx 0;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    &.active {
      @include text-color();
    }
  }
}
</style>
